<template>
  <div class="content">
     <content title="歌单推荐" indexName="songs" :tabItems="songsTitles">
			<template #swiper>
				<swiper>
					<div v-for="i in songsShowData" class="swiperItem">
						<song-sheet v-for="j in i" :info="j.info" :imgLink="j.img"
						describe="100首精选粤语歌 怀念旧时光" class="item3"></song-sheet>
					</div>
				</swiper>
			</template>
     </content>
		 <content title="新歌首发" indexName="song" :tabItems="songTitles">
			<template #swiper>
				<swiper>
					<div v-for="i in songShowData" class="swiperItem">
						<song-sheet-small v-for="j in i" :info="j.info" :imgLink="j.img"
						:describe="j" class="item1"></song-sheet-small>
					</div>
				</swiper>
			</template>
		 </content>
		 <content title="精彩推荐" indexName="news" :tabItems="newsTitles">
				<template #swiper>
						<swiperB :data="newsData"></swiperB>
				</template>
		 </content>
		 <content title="最新专辑" indexName="album" :tabItems="albumTitles">
				<template #swiper>
					<swiper>
						<div v-for="i in albumShowData" class="swiperItem">
							<song-sheet v-for="j in i" :info="j.info" :imgLink="j.img"
							describe="100首精选粤语歌 怀念旧时光" class="item3"></song-sheet>
						</div>
					</swiper>
				</template>
		 </content>
		 <content title="MV" indexName="mv" :tabItems="mvTitles">
				<template #swiper>
					<swiper>
						<div v-for="i in mvShowData" class="swiperItem">
							<mv v-for="j in i" :info="j.info" :imgLink="j.img"
							describe="100首精选粤语歌 怀念旧时光" class="item2"></mv>
						</div>
					</swiper>
				</template>
		 </content>
  </div>
</template>

<script>
	import content from './components/content/contentBlock.vue'
	import songSheet from 'components/swiperItem/songSheet.vue'
	import songSheetSmall from 'components/swiperItem/songSheetSmall.vue'
	import mv from 'components/swiperItem/mv.vue'
	import swiper from './components/swiper/lunBo.vue';
	import swiperB from './components/swiper/lunBo2.vue';
  export default{
    name:'',
    data(){
      return {
				songsTitles:['为你推荐','网络歌曲','经典','情歌','RB'],
				songTitles:['最新','华语','英语','日语','西语','其他'],
				albumTitles:['推荐','华语','英语','日语','西语','其他'],
				mvTitles:['精选','华语','英语','日语','西语','其他'],
				newsTitles:['最新','最热'],
				songsData:[],
				songData:[],
				albumData:[],
				mvData:[],
				newsData:[],
				activeIndexs:{
					song:0,
					songs:0,
					album:0,
					mv:0
				}
      }
    },
		computed:{
			songsShowData(){
				return this.songsData[this.activeIndexs.songs]
			},
			songShowData(){
				return this.songData[this.activeIndexs.song]
			},
			albumShowData(){
				return this.albumData[this.activeIndexs.album]
			},
			mvShowData(){
				return this.mvData[this.activeIndexs.mv]
			},
		},
    methods:{
      create(){
				let item=[],item2=[],res=[]
				let obj={
					img:require('../../../assets/img/test.jpg'),
					info:'播放量：'+123,
					describe:"100首精选粤语歌 怀念旧时光"
				}
				let obj2={
					img:require('../../../assets/img/test2.jpg'),
					info:'播放量：'+123,
					describe:"100首精选粤语歌 怀念旧时光"
				}
				for(let j=0;j<10;j++){
					item.push(obj)
					item2.push(obj2)
				}
				for(let j=0;j<4;j++){
					res.push(item)
				}
				res.push(item2)
				this.songsData=res
				
				item=[],item2=[],res=[]
				for(let j=0;j<18;j++){
					item.push(obj)
					item2.push(obj2)
				}
				for(let j=0;j<4;j++){
					res.push(item)
				}
				res.push(item2)
				this.songData=res
				
				item=[],item2=[],res=[]
				for(let j=0;j<14;j++){
					item.push(obj)
					item2.push(obj2)
				}
				for(let j=0;j<4;j++){
					res.push(item)
				}
				res.push(item2)
				this.albumData=res
				
				item=[],item2=[],res=[]
				for(let j=0;j<17;j++){
					item.push(obj)
					item2.push(obj2)
				}
				for(let j=0;j<4;j++){
					res.push(item)
				}
				res.push(item2)
				this.mvData=res
				
				item=[],item2=[],res=[]
				for(let j=0;j<9;j++){
					item.push(obj)
					item2.push(obj2)
				}
				for(let j=0;j<1;j++){
					res.push(item)
				}
				res.push(item2)
				this.newsData=res
				
				console.log(this.newsData);
			},
			initItemPage(data,num){
				let res=[]
				let page=Math.ceil(data.length/num)
				for(let i=0;i<page;i++){
					let arr=[]
					for(let j=0;j<num;j++){
						if(data[i*num+j])
						arr.push(data[i*num+j])
					}
					res.push(arr)
				}
				return res
			},
			initAllPage(data,num){
				let res=[]
				for(let i of data){
					res.push(this.initItemPage(i,num))
				}
				return res
			}
    },
    components:{
       content,swiper,swiperB,songSheetSmall,mv,songSheet
    },
		created() {
			this.create()
			this.songData=this.initAllPage(this.songData,9)
			this.songsData=this.initAllPage(this.songsData,4)
			this.albumData=this.initAllPage(this.albumData,8)
			this.mvData=this.initAllPage(this.mvData,10)
			console.log(this.songsShowData);
		},
		mounted() {
			this.$bus.on("tabChange",res => {
				this.activeIndexs[res]=this.$store.state[res]
			});
		}
  }
</script>

<style scoped>
	.content{
		padding: 10px 0;
	}
	.swiperItem{
		width: 1152px;
	}
	.item3{
		float: left;
		margin: 10px 85px 10px 0px;
	}
	.item1{
		margin: 5px 68px 5px 0px;
		float: left;
	}
	.item2{
		float: left;
		margin: 10px 0px;
		margin-right: 38px;
	}
	.item:nth-of-type(4n),.item3:nth-of-type(4n){
		margin-right: 0px;
	}
	.item1:nth-of-type(3n){
		margin-right: 0px;
	}
	.item2:nth-of-type(5n){
		margin-right: 0px;
	}
</style>
